<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2.何为数据代理</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <!-- 数据代理：通过一个对象，代理对另外一个对象中的属性操作（读/写） -->
    <div id="root">

    </div>

    <script type="text/javascript">

        let obj = { x: 100 };
        let obj2 = { y: 200 };
        Object.defineProperty(obj2, 'x', {
            enumerable: true,
            writable: true,
            configurable: true,
            get() {
                return obj.x;
            },
            set(value) {
                obj.x = value;
            }
        })

    </script>

</body>

</html>